import { useState } from 'react';
import './App.scss';
import Button, { ButtonType, ButtonSize } from "./components/Button/button";
import Menu from "./components/Menu/menu";
import MenuItem from "./components/Menu/menuItem";
import Alert, { AlertType, AlertEffect } from "./components/Alert/alert";
import BackTop from "./components/BackTop/backtop";
import Breadcrumb from "./components/Breadcrumb/breadcrumb";
import BreadcrumbItem from "./components/Breadcrumb/breadcrumbItem";
import Checkbox from './components/Checkbox/checkbox';
import CheckboxGroup, { CheckboxGroupValue } from './components/Checkbox/checkboxGroup';
import Link from './components/Link/link';
import Radio from './components/Radio/radio';
// import RadioGroup from './components/Radio/radioGroup';
import Card from './components/Card/card';
import Dialog from './components/Dialog/dialog';
import Divider from './components/Divider/divider';
import Container from './components/Container/container';
import Header from './components/Container/header';
import Main from './components/Container/main';
import Footer from './components/Container/footer';
import Aside from './components/Container/aside';
import Row from './components/Layout/row';
import Col from './components/Layout/col';
import TimelineItem from './components/Timeline/timelineItem';
import Timeline from './components/Timeline/timeline';
import Input, { InputValueType } from './components/Input/input';
import Collapse, { CollapseValueType } from './components/Collapse/collapse';
import CollapseItem from './components/Collapse/collapseItem';
import Popover from './components/Popover/popover';

function App() {

  const hello = () => {
    alert('hello world');
  }

  const isCheckout1btn = () => {
    setIsCheckout1(!isCheckout1);
  }

  const [isCheckout1, setIsCheckout1] = useState(false);

  const [isCheckout2, setIsCheckout2] = useState(false);

  const [checkList, setCheckList] = useState<CheckboxGroupValue>([]);

  const clickFun = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
    console.log(e);
  }

  const [radioValue, setRadioValue] = useState(false);

  // const [radioGroupValue, setRadioGroupValue] = useState<RadioLabelType>(1);

  // const radioGroupChange = (label: RadioLabelType) => {
  //   // alert(lable);
  //   console.log(label);
  // }

  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);


  const dialogBeforeClose = (done: Function) => {
    done();
  }

  const [inputValue, setInputValue] = useState<InputValueType>('');

  const [collapseValue, setCollapseValue] = useState<CollapseValueType>([]);

  const [collapseValue2, setCollapseValue2] = useState<CollapseValueType>("");

  return (
    <>
      <h1>弹出框</h1>
      <Popover referenceJSX={<Button>点击打开</Button>}></Popover>
      <h1>折叠面板</h1>
      <Collapse value={collapseValue} setValue={setCollapseValue}>
        <CollapseItem name={'collapseItem1'} title={'标题1'}>内容1</CollapseItem>
        <CollapseItem name={'collapseItem2'} title={'标题2'}>内容2</CollapseItem>
        <CollapseItem name={'collapseItem3'} title={'标题3'}>内容3</CollapseItem>
      </Collapse>
      <Divider></Divider>
      <Collapse value={collapseValue2} setValue={setCollapseValue2} accordion>
        <CollapseItem name={'collapseItem1'} title={'手风琴标题1'}>内容1</CollapseItem>
        <CollapseItem name={'collapseItem2'} title={'手风琴标题2'}>内容2</CollapseItem>
        <CollapseItem name={'collapseItem3'} title={'手风琴标题3'}>内容3</CollapseItem>
      </Collapse>
      <h1>输入框</h1>
      <Input value={inputValue} setValue={setInputValue}></Input>
      <Input value={inputValue} setValue={setInputValue} disabled></Input>
      <Input value={inputValue} setValue={setInputValue} clearable></Input>
      <Input value={inputValue} setValue={setInputValue} showPassword></Input>
      <Input
        placeholder={"请输入日期"}
        suffixIcon={"icon-riqi"}
        value={inputValue} setValue={setInputValue}
      >
      </Input>
      <Input
        placeholder={"请输入内容"}
        prefixIcon={"icon-sousuo"}
        value={inputValue} setValue={setInputValue}
      >
      </Input>
      <Input placeholder="请输入内容" value={inputValue} setValue={setInputValue} prependJSX={"Http://"}>
      </Input>
      <Input placeholder="请输入内容" value={inputValue} setValue={setInputValue} appendJSX={".com"}>
      </Input>
      <Input
        type="textarea"
        rows={2}
        placeholder="请输入内容"
        value={inputValue} setValue={setInputValue}
      >
      </Input>
      <h1>时间轴</h1>
      <Timeline>
        <TimelineItem time={'2023-03-30'} content={'开发时间轴'}></TimelineItem>
        <TimelineItem time={'2023-03-31'} content={'完成时间轴'}></TimelineItem>
      </Timeline>
      <Timeline>
        <TimelineItem time={'2023-03-30'} content={'开发时间轴'}
          timeJSX={(time) => <div>{'我是自定义时间' + time}</div>}
          contentJSX={(content) => <div>{'我是自定义内容' + content}</div>}
        ></TimelineItem>
        <TimelineItem time={'2023-03-31'} content={'完成时间轴'}></TimelineItem>
      </Timeline>
      <Timeline placement={'down'}>
        <TimelineItem time={'2023-03-30'} content={'开发时间轴'}></TimelineItem>
        <TimelineItem time={'2023-03-31'} content={'完成时间轴'}></TimelineItem>
      </Timeline>
      <h1>布局</h1>
      <Row>
        <Col span={24}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={12}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={8}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={8}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Row>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Row>
        <Col span={4}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Divider />
      <Row gutter={20}>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Divider />
      <Row gutter={20}>
        <Col span={16}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={8}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={8}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={8}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={4}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={16}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={4}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Divider />
      <Row gutter={20}>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6} offset={6}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={6} offset={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6} offset={6}>
          <div className={"grid-content2"}></div>
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12} offset={6}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Divider />
      <Row type="flex">
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Row type="flex" justify="center">
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Row type="flex" justify="end">
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Row
        type="flex"
        justify="space-between"

      >
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <Row
        type="flex"
        justify="space-around"

      >
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content2"}></div>
        </Col>
        <Col span={6}>
          <div className={"grid-content"}></div>
        </Col>
      </Row>
      <h1>布局容器</h1>
      <Container>
        <Header>Header</Header>
        <Main>Main</Main>
      </Container>
      <Divider />
      <Container>
        <Header>Header</Header>
        <Main>Main</Main>
        <Footer>Footer</Footer>
      </Container>
      <Divider />
      <Container>
        <Aside width="200px">Aside</Aside>
        <Main>Main</Main>
      </Container>
      <Divider />
      <Container>
        <Header>Header</Header>
        <Container>
          <Aside width="200px">Aside</Aside>
          <Main>Main</Main>
        </Container>
      </Container>
      <Divider />
      <Container>
        <Header>Header</Header>
        <Container>
          <Aside width="200px">Aside</Aside>
          <Container>
            <Main>Main</Main>
            <Footer>Footer</Footer>
          </Container>
        </Container>
      </Container>
      <Divider />
      <Container>
        <Aside width="200px">Aside</Aside>
        <Container>
          <Header>Header</Header>
          <Main>Main</Main>
        </Container>
      </Container>
      <Divider />
      <Container>
        <Aside width="200px">Aside</Aside>
        <Container>
          <Header>Header</Header>
          <Main>Main</Main>
          <Footer>Footer</Footer>
        </Container>
      </Container>
      <h1>分割线</h1>
      <div>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <Divider></Divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
      </div>
      <div>
        <span>头上一片晴天，心中一个想念</span>
        <Divider contentPosition="left">少年包青天</Divider>
        <span>饿了别叫妈, 叫饿了么</span>
        <Divider>
          <i className="iconfont icon-jiuping"></i>
        </Divider>
        <span>强盛集团就是强</span>
        <Divider contentPosition="70%">
          <i className="iconfont icon-jiuping"></i>
        </Divider>
        <span>为了无法计算的价值</span>
        <Divider contentPosition="right">阿里云</Divider>
      </div>
      <div>
        <span>雨纷纷</span>
        <Divider direction="column"></Divider>
        <span>旧故里</span>
        <Divider direction="column"></Divider>
        <span>草木深</span>
      </div>
      <h1>对话框</h1>
      <Button onClick={() => setVisible(true)}>打开dialog</Button>
      <Button onClick={() => setVisible2(true)}>打开dialog2</Button>
      <Dialog visible={visible} setVisible={setVisible} beforeClose={dialogBeforeClose}>
        <span>这是一段信息</span>
      </Dialog>
      <Dialog visible={visible2} setVisible={setVisible2} beforeClose={dialogBeforeClose}
        title={'自定义标题'}
        cancelText={'自定义取消按钮文本'}
        sureText={'自定义确认按钮文本'}
        modal={true} >
        <span>这是一段信息2</span>
      </Dialog>
      <h1>卡片</h1>
      <Card headerJSX={<div><span>Card name</span>
        <Link>Operation link</Link></div>}>{[1, 2, 3, 4].map(item => <div key={item}>{item}</div>)}</Card>
      <Card style={{ width: '300px' }}>{[1, 2, 3, 4].map(item => <div key={item}>{item}</div>)}</Card>
      <Card style={{ width: '300px' }} shadow={'hover'}>{[1, 2, 3, 4].map(item => <div key={item}>{item}</div>)}</Card>
      <Card style={{ width: '300px' }} shadow={'never'}>{[1, 2, 3, 4].map(item => <div key={item}>{item}</div>)}</Card>
      <h1>单选框</h1>
      <Radio value={radioValue} setValue={setRadioValue}>勾选</Radio>
      {`值 ${radioValue}`}
      {/* <RadioGroup value={radioGroupValue} setValue={setRadioGroupValue} onChange={radioGroupChange}>
        <Radio label={1}>Option1</Radio>
        <Radio label={2} disabled={true}>Option2</Radio>
        <Radio label={3}>Option3</Radio>
      </RadioGroup>
      {`选中的值 ${radioGroupValue}`} */}
      <h1>文字链接</h1>
      <Link clickAfterCallback={clickFun} href={"https://www.baidu.com"}>
        文字描述当前窗口跳转
      </Link>
      <Link mainColor={"green"} target={"_blank"} href={"https://www.baidu.com"}>文字描述新窗口打开</Link>
      <Link mainColor={'#fc5531'} disabled={true} href={"https://www.baidu.com"}>禁止点击</Link >
      <Link openUnderline={false} href={"https://www.baidu.com"}>不开启下划线</Link>
      <Link href={"https://www.baidu.com"}><div style={{ width: '100px', height: '100px', backgroundColor: 'pink' }}></div></Link>
      <h1>复选框</h1>
      <Checkbox
        value={isCheckout1}
        label="复选框"
        setValue={setIsCheckout1}
        disabled={false}
      />
      {isCheckout1 ? 'true' : 'false'}
      <Button onClick={isCheckout1btn}>改变复选框的选中</Button>
      <Checkbox
        value={isCheckout2}
        label="复选框2"
        disabled={true}
        setValue={setIsCheckout2}
      />
      {isCheckout2 ? 'true' : 'false'}
      <CheckboxGroup value={checkList} setValue={setCheckList}>
        <Checkbox label={"复选框 A"}></Checkbox>
        <Checkbox label={"复选框 B"}></Checkbox>
        <Checkbox label={"复选框 C"}></Checkbox>
        <Checkbox label={"禁用"} disabled></Checkbox>
        <Checkbox label={"选中且禁用"} disabled></Checkbox>
      </CheckboxGroup>
      {checkList.map(item => <span key={item}>{item}-</span>)}
      <h1>面包屑</h1>
      <Breadcrumb separator={"/"}>
        <BreadcrumbItem to={{ path: '#/home' }}
        >首页</BreadcrumbItem>
        <BreadcrumbItem><a href="http://www.baidu.com">百度</a></BreadcrumbItem
        >
        <BreadcrumbItem>主题</BreadcrumbItem>
        <BreadcrumbItem>指南</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb separator={"/"} separatorClassName={'icon-chevron-right'}>
        <BreadcrumbItem to={{ path: '#/home' }}
        >首页</BreadcrumbItem>
        <BreadcrumbItem><a href="http://www.baidu.com">百度</a></BreadcrumbItem
        >
        <BreadcrumbItem>主题</BreadcrumbItem>
        <BreadcrumbItem>指南</BreadcrumbItem>
      </Breadcrumb>
      <h1>回到顶部</h1>
      <BackTop></BackTop>
      <BackTop bottom={100} right={100} hiddenValue={100}
      >快速回到顶部
      </BackTop>
      <BackTop
        bottom={150}
        right={150}
        hiddenValue={100}
        animationTime={100}
      >慢速回到顶部
      </BackTop>
      <BackTop
        bottom={200}
        right={200}
        hiddenValue={100}
      >
        <div style={{ height: '30px', width: '30px', borderRadius: '50%', border: '1px solid #ccc', textAlign: 'center' }}><i className={'iconfont icon-chevron-up'}></i></div>
      </BackTop>
      <h1>警告</h1>
      <Alert title="成功提示的文案" type={AlertType.Success}></Alert>
      <Alert title="消息提示的文案" type={AlertType.Info}></Alert>
      <Alert title="警告提示的文案" type={AlertType.Warning}></Alert>
      <Alert title="错误提示的文案" type={AlertType.Error}></Alert>
      <Alert title="成功提示的文案" type={AlertType.Success} effect={AlertEffect.Dark}>
      </Alert>
      <Alert title="消息提示的文案" type={AlertType.Info} effect={AlertEffect.Dark}>
      </Alert>
      <Alert title="警告提示的文案" type={AlertType.Warning} effect={AlertEffect.Dark}>
      </Alert>
      <Alert title="错误提示的文案" type={AlertType.Error} effect={AlertEffect.Dark}>
      </Alert>
      <Alert title="不可关闭的 alert" type={AlertType.Success} closable={true}>
      </Alert>
      <Alert title="自定义 close-text" type={AlertType.Info} closeText={"知道了"}>
      </Alert>
      <Alert title="设置了回调的 alert" type={AlertType.Warning} close={hello} closeText={"hello"}>
      </Alert>
      <Alert title="成功提示的文案" type={AlertType.Success} showIcon>
      </Alert>
      <Alert title="消息提示的文案" type={AlertType.Info} showIcon></Alert>
      <Alert title="警告提示的文案" type={AlertType.Warning} showIcon>
      </Alert>
      <Alert title="错误提示的文案" type={AlertType.Error} showIcon></Alert>
      <Alert
        title="带辅助性文字介绍"
        type={AlertType.Success}
        description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"
      >
      </Alert>
      <Alert
        title="成功提示的文案"
        type={AlertType.Success}
        description="文字说明文字说明文字说明文字说明文字说明文字说明"
        showIcon
      >
      </Alert>
      <Alert
        title="消息提示的文案"
        type={AlertType.Info}
        description="文字说明文字说明文字说明文字说明文字说明文字说明"
        showIcon
      >
      </Alert>
      <Alert
        title="警告提示的文案"
        type={AlertType.Warning}
        description="文字说明文字说明文字说明文字说明文字说明文字说明"
        showIcon
      >
      </Alert>
      <Alert
        title="错误提示的文案"
        type={AlertType.Error}
        description="文字说明文字说明文字说明文字说明文字说明文字说明"
        showIcon
      >
      </Alert>
      <h1>菜单</h1>
      <Menu defaultIndex={2} onSelect={(index) => alert(index)}>
        <MenuItem >item1</MenuItem>
        <MenuItem disabled>item2</MenuItem>
        <MenuItem >item3</MenuItem>
      </Menu>
      <Menu defaultIndex={0} onSelect={(index) => alert(index)} mode={'vertical'}>
        <MenuItem >item1</MenuItem>
        <MenuItem disabled>item2</MenuItem>
        <MenuItem >item3</MenuItem>
      </Menu>
      <h1>按钮</h1>
      <Button autoFocus className={'custom'} onClick={() => { alert('default') }}>default Button</Button>
      <Button btnType={ButtonType.Warning}>Warning Button</Button>
      <Button btnType={ButtonType.Success}>Success Button</Button>
      <Button btnType={ButtonType.Primary}>Primary Button</Button>
      <Button btnType={ButtonType.Danger}>Danger Button</Button>
      <Button size={ButtonSize.Small}>Small Button</Button>
      <Button size={ButtonSize.Large}>Large Button</Button>
      <Button disabled>disabled Button</Button>
      <Link style={{ position: 'fixed', top: '0', right: '0' }} href={"https://gitee.com/ctbaobao/yulang-ui-react-hooks-ts"}>gitee仓库地址</Link>
    </>
  );
}

export default App;